<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>KIT ADMIN</title>
    <link rel="stylesheet" href="/statics/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/statics/plugins/font-awesome/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/statics/src/css/app.css" media="all"/>
    <link rel="stylesheet" href="/statics/src/css/themes/default.css" media="all" id="skin" kit-skin/>
    <script src="/statics/plugins/layui/layui.js"></script>
</head>

<body>
<div>
    <form class="layui-form" style="margin-top: 20px">
        <div class="layui-form-item" align="center">
            <label for="itemName" class="layui-form-label">
                <span class="x-red">*</span>项目名称
            </label>
            <input type="hidden" name="itemId" th:value="${edit.itemId}">
            <div class="layui-input-inline">
                <input type="text" id="itemName" name="itemName" th:value="${edit.itemName}"
                       required="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" align="center">
            <label for="itemTime" class="layui-form-label" >
                <span class="x-red">*</span>服务时间
            </label>
            <div class="layui-input-inline">
                <input type="text" id="itemTime" name="itemTime" lay-verify="required|number" required="true" th:value="${edit.itemTime}"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" align="center">
            <label for="itemPrice" class="layui-form-label">
                <span class="x-red">*</span>服务费用
            </label>
            <div class="layui-input-inline">
                <input type="text" id="itemPrice" name="itemPrice" required="true" lay-verify="required|number" th:value="${edit.itemPrice}"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" align="center">
            <label for="itemIntro" class="layui-form-label">
                <span class="x-red">*</span>项目简介
            </label>
            <div class="layui-input-inline">
                <input type="text" id="itemIntro" name="itemIntro" required="true" th:value="${edit.itemIntro}"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" align="center">
            <button class="layui-btn" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form, layer = layui.layer;
        //自定义验证规则
        form.verify({
            gender: function (value) {
                if (value == 1) {
                    return '请选择性别';
                }
            }
            , role: function (value) {
                if (value < 0) {
                    return '请选择角色';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function (data) {
            console.log(JSON.stringify(data.field))
            //发异步
            $.post({
                dataType: 'json',
                contentType: 'application/json',
                url: "/item/save",
                data: JSON.stringify(data.field),
                success: function (result) {
                    if (result.code == 0) {
                        layer.alert("保存成功", {
                            title: '保存成功：'
                        }, function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.location.replace(parent.location.href)
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg('保存失败!', {icon: 6, time: 1000});
                    }
                },
                error: function () {
                    layer.msg('网络繁忙!', {icon: 6, time: 1000});
                }
            });

            return false;
        });

    });
</script>

</body>

</html>